<template>
  <el-tabs v-model="currentNewsType"
           class='news-top-bar'
           @tab-click="handleClick">
    <el-tab-pane label="全部"
                 name="全部"></el-tab-pane>
    <el-tab-pane label="理财"
                 name="理财"></el-tab-pane>
    <el-tab-pane label="国际"
                 name="国际"></el-tab-pane>
    <el-tab-pane label="宏观"
                 name="宏观"></el-tab-pane>
    <el-tab-pane label="股市"
                 name="股市"></el-tab-pane>
  </el-tabs>
</template>


<style scoped>
.news-top-bar  {
 
  font-size: 1.2rem !important;
}
</style>

<script>
export default {
  props: {
    newsType: {
      type: String,
      default: "全部"
    }
  },
  watch: {
    newsType (newVal, oldVal) {
      this.currentNewsType = newVal //对父组件传过来的值进行监听，如果改变也对子组件内部的值进行改变
      // console.log("儿子更新了", newVal, oldVal)
    }
  },

  data () {
    return {
      currentNewsType: '全部'
    };
  },
  methods: {
    handleClick (tab, event) {

      // console.log(tab, event);
      this.$emit("updateNewsByType", this.currentNewsType);
    }
  }
};
</script>